<template>
  <view class="page">
    <uni-nav-bar
      id="nav-bar"
      title="雪王币明细"
      left-icon="left"
      statusBar
      backgroundColor="#fff"
      color="#333"
      :border="false"
      @clickLeft="$tools.back"
    />
    <nav-tab
      v-model="current"
      :items="navList"
      id="nav-tab"
      @change="handleChange"
    />
    <scroll-view
      class="point-list"
      :style="{ height: scrollHeight + 'px' }"
      scroll-y
    >
      <view class="p-base">
        <uni-collapse
          v-if="pointList.length > 0"
          ref="collapse"
          :border="false"
        >
          <uni-collapse-item
            :name="item.month"
            :title="item.month"
            v-for="(item, index) in pointList"
            :key="index"
            :border="false"
            open
          >
            <view class="content">
              <view
                class="item"
                v-for="(item, index) in item.list"
                :key="index"
              >
                <view class="left">
                  <view class="left-title">{{ item.pointTypeName }}</view>
                  <view class="left-time">{{ item.createdTime }}</view>
                </view>
                <view class="right">
                  {{ item.changeType === 1 ? "+" : "-" }}{{ item.changePoint }}
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
        <view class="tips">
          <view class="mb-sm">如需了解12个月之前的明细记录</view>
          <view
            >请联系<text class="text-underline">"在线客服"</text>获得帮助</view
          >
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import { mapState, mapActions } from "vuex"
export default {
  name: "CoinsDetail",
  data() {
    return {
      current: 0,
      navList: ["全部", "获得", "消耗"],
      scrollHeight: 0
    }
  },
  computed: {
    ...mapState("coins", ["pointList"])
  },
  onReady() {
    const query = uni.createSelectorQuery().in(this)
    query.selectAll("#nav-bar,#nav-tab").boundingClientRect()
    query.exec(res => {
      let height = 0
      res[0].forEach(item => {
        height += item.height
      })
      this.scrollHeight = uni.getSystemInfoSync().windowHeight - height
    })
  },
  onLoad() {
    this.getPointList()
  },
  methods: {
    ...mapActions("coins", ["getPointListAction"]),
    getPointList() {
      this.getPointListAction(this.current)
      this.$nextTick(() => {
        this.$refs.collapse.resize()
      })
    },
    handleChange() {
      this.getPointList()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .uni-collapse {
    background-color: transparent;
  }

  .uni-collapse-item__title-box {
    background-color: transparent;
  }

  .uni-collapse-item__title-text {
    color: $uni-text-color;
  }
}

.content {
  background-color: #fff;
  border-radius: $uni-border-radius-lg;
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: $uni-spacing-row-xl $uni-spacing-row-lg;
  border-bottom: 1px solid $uni-border-color;
  &:last-child {
    border-bottom: none;
  }

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    &-title {
      font-size: $uni-font-size-base;
      color: $uni-text-color;
      margin-bottom: $uni-spacing-row-base;
    }
    &-time {
      font-size: $uni-font-size-xs;
      color: $uni-text-color-grey;
    }
  }

  .right {
    font-size: $uni-font-size-lg;
    color: $uni-text-color;
  }
}

.tips {
  padding: $uni-spacing-row-xl 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
}
</style>
